<template>
	<view style="background: #F4F6FA;width: 100%;height: 100vh;display: flex;flex-direction: column;">
		<view class="top_wrap">
			<view class="back_wrap">
				<image @tap="comeback" style="width: 36rpx;height: 36rpx;margin-left:32rpx;"
					src="../../static/img/index/24.png"></image>
				<text style="font-size: 36rpx;color: #262626;">消息</text>
				<view @tap="doReadAllMsg" style="margin-right: 32rpx;font-size: 30rpx;color:#262626 ;">全部已读</view>
			</view>
			<view class="msg_type_wrap">
				<view @tap="changeMsg(index)" v-for="(item,index) in msgTypeList" :key="index" class="msg_type">
					<image class="msg_type_img"
						:src="selected==index?item.msgType?.icon:item.msgType?.icon2"></image>
					<view class="msg_type_text" :style="{color:selected==index?'#6B64D3':'#595959'}">
						{{item.msgType.name}}
					</view>
					<view v-if="item.unReadCount>0" class="msg_count">{{item.unReadCount}}</view>
				</view>
			</view>
		</view>
		<scroll-view :refresher-triggered="data.refresherBool" :refresher-enabled="true"
				@refresherrefresh="refresherrefresh"  @scrolltolower="scrolltolower" scroll-y="true" >
			<view class="msg_content_wrap">
				<view @tap="chooseMsg(item)" class="msg_content" v-for="(item,index) in msgList" :key="index">
					<view class="msg_content_left">
						<image class="msg_content_img" v-if="item.iconFileId==null||item.iconFileId==undefined||
						item.iconFileId==''" :src="msgTypeList[selected]?.msgType?.icon"></image>
						<image class="msg_content_img" v-else :src="httpUrl+item.iconFileId"></image>
						<view class="msg_content_left_text">
							<view class="msg_content_left_text_name">{{item.msgTitle}}</view>
							<view class="msg_content_left_text_title">{{item.msgContent}}</view>
						</view>
					</view>
					<view class="msg_content_right">
						<view class="msg_content_right_time">{{item.msgTime}}</view>
						<view v-if="item.state=='N'" class="msg_content_right_count"></view>
					</view>
				</view>
				<uni-load-more :status="moreFlag" />
			</view>
		</scroll-view>
		
	</view>
</template>

<script setup lang="ts">
	import { ref,reactive } from 'vue'
	import { groupMsg,pageMsg,readMsgById,readAllMsg } from '@/utils/api/msg.ts'
	import { onLoad,onPullDownRefresh,onReachBottom } from '@dcloudio/uni-app'
	const httpUrl=getApp().globalData.baseUrl+'/app/file/viewFile?fileId='
	const moreFlag=ref('noMore')
	const data = reactive<any>({
		
	})
	const comeback = () => {
		uni.navigateBack()
	}
	const msgTypeList = ref<any>([])
	
	const selected = ref(0)
	// 消息类型切换
	const changeMsg = (index : number) => {
		selected.value = index
		queryData.value.pageNo = 1
		queryData.value.msgType=msgTypeList.value[selected.value]?.msgType?.value
		loadList()
	}
	// 选择阅读消息
	const chooseMsg=(item:any)=>{
		item.state='Y'
		uni.navigateTo({
			url: `/pages/index/msgMore?msgId=${item.id}`
		})
		loadMsgType()
	}
	const msgList=ref([])
	const queryData = ref({
		pageNo: 1,
		pageSize: 10,
		msgType: 'SYS'
	})
	const loadList=()=>{
		if (queryData.value.pageNo == 1) {
			msgList.value = [];
		}
		pageMsg({data:queryData.value}).then(res=>{
			msgList.value.push(...res.data.list);
			data.total = res.data.total;
			if(res.data.list.length!=queryData.value.pageSize){
				moreFlag.value='noMore'
			}else{
				moreFlag.value='more'
			}
			data.refresherBool = false;
		})
	}
	
	function loadMsgType(){
		groupMsg().then(res=>{
			msgTypeList.value = res.data
		})
	}
	
	function doReadAllMsg(){
		uni.showModal({
			title: '提示',
			content: '确认标记所有消息为已读?',
			success: (e) => {
				if (e.confirm) {
					 readAllMsg().then(res=>{
						 loadMsgType()
						 msgList.value.forEach((value,index)=>{
							 value.state='Y'
						 })
					 })
					 
				}
			}
		})
	}
	const refresherrefresh = () => {
		data.refresherBool = true;
		queryData.value.pageNo=1
		loadList()
	}
	const scrolltolower=()=>{
		if(data.total != msgList.value.length){
			queryData.value.pageNo += 1;
			loadList()
		}
	}
	onLoad(async () => {
		const res = await groupMsg()
		msgTypeList.value = res.data
		
		loadList() 
		uni.$off('refreshMsg')
		uni.$on('refreshMsg', function (msgData) {
			const type=msgData.msgType
			if(type===queryData.value.msgType){
				msgList.value.unshift(msgData)
				msgTypeList.value[selected.value].unReadCount++
			}
			
		})
	})
	
</script>

<style lang="scss" scoped>
	scroll-view{
		flex: 1;
		overflow: auto;
		position: relative;
		z-index: 9;
	}
	.top_wrap {
		width: 100%;
		// height: 480rpx;
		padding-bottom: 40rpx;
		background: url('../../static/img/msg_bj.png') no-repeat;
		background-size: cover;
		padding-top: var(--status-bar-height);

		.back_wrap {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.msg_type_wrap {
			margin: 35rpx 24rpx 0 24rpx;
			height: 154rpx;
			display: flex;
			justify-content: space-between;

			.msg_type {
				width: 134rpx;
				height: 154rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				position: relative;

				.msg_type_img {
					width: 96rpx;
					height: 96rpx;
				}

				.msg_type_text {
					font-size: 28rpx;
					margin-top: 16rpx;
				}

				.msg_count {
					width: 51rpx;
					height: 34rpx;
					background: #FF263F;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					border: 2rpx solid #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 20rpx;
					color: #fff;
					position: absolute;
					top: 0;
					right: 7rpx;
				}
			}
		}
	}

	.msg_content_wrap {
		margin: 0 24rpx 20rpx 24rpx;
		// height: 75vh;
		background: #fff;
		border-radius: 32rpx;
		.msg_content{
			margin:0 20rpx;
			height: 174rpx;
			border-bottom: 1rpx solid #F4F6FA;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.msg_content_left{
				height: 104rpx;
				display: flex;
				align-items: center;
				.msg_content_img{
					width: 96rpx;
					height: 96rpx;
					border-radius: 60rpx;
				}
				.msg_content_left_text{
					height: 104rpx;
					margin-left: 20rpx;
					.msg_content_left_text_name{
						font-size: 36rpx;
						color: #262626;
						font-weight: bold;
						height: 54rpx;
						line-height: 54rpx;
					}
					.msg_content_left_text_title{
						font-size: 28rpx;
						color: #8C8C8C;
						font-weight: bold;
						height: 42rpx;
						line-height: 42rpx;
						margin-top: 8rpx;
					}
				}
			}
			.msg_content_right{
				width: 62rpx;
				height: 104rpx;
				.msg_content_right_time{
					width: 62rpx;
					height: 36rpx;
					font-size: 24rpx;
					color: #BFBFBF;
				}
				.msg_content_right_count{
					margin-top: 33rpx;
					margin-left: 11rpx;
					width: 20rpx;
					height: 20rpx;
					background: #FF263F;
					border-radius: 20rpx;
					border: 2rpx solid #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 20rpx;
					color: #fff;
				}
			}
		}
	}
</style>